<template>
    <main class="container">
        <div class="content" v-if="!!getToken()">
            <van-card :thumb="userStore.avatar" class="user_card">
                <template #title>
                    <p class="user_name">{{ userStore.name }}</p>
                </template>
                <template #desc>
                    <p class="user_desc">{{ userStore.sex == 1 ? "男" : "女" }}</p>
                </template>
                <template #tags>
                    <p class="user_sign">{{ userStore.sign }}</p>
                </template>
            </van-card>
            <div style="background: #f0f0f0; padding: 10px">
                <van-cell icon="logistics" title="我的收货地址" is-link to="/address-list" />
                <van-cell icon="orders-o" title="我的订单" is-link to="/order" />
                <van-cell icon="description" title="我的文章" is-link to="/my-article" />
                <van-cell icon="star-o" title="我的收藏" is-link to="/my-collection" />
                <van-cell icon="good-job-o" title="我的点赞" is-link to="/thumbs-up" />
            </div>
            <div class="logout_box">
                <van-button class="logout_btn" type="warning" @click="logOut">退出登录</van-button>
            </div>
        </div>
        <div v-else>
            <van-empty description="请先登录">
                <van-button @click="router.replace('/login')" round type="primary" style="width: 200px">去登录</van-button>
            </van-empty>
        </div>
    </main>
</template>

<script setup>
import useUserInfo from "@/stores/useUserInfo";
import { logout } from "@/api/user";
import { getToken, removeToken } from "@/utils/token";
import { useRouter } from "vue-router";
import { showConfirmDialog, showSuccessToast } from "vant";

let userStore = useUserInfo();
let router = useRouter();

// 退出登录
let logOut = () => {
    showConfirmDialog({
        title: "确认登出",
        message: "是否确认退出登录",
    })
        .then(async () => {
            // 确定 执行登出
            await logout({ token: getToken() });
            //清除token
            removeToken();
            showSuccessToast("登出成功");
            router.replace("/login");
        })
        .catch(() => {
            // on cancel
        });
};
</script>

<style lang="scss" scoped>
main.container {
    .user_card {
        background: #f0f0f0;
        margin-bottom: 10px;

        .user_name {
            line-height: 20px;
            margin-top: 2px;
            font-size: 20px;
            color: aqua;
        }

        .user_desc {
            line-height: 20px;
            margin: 6px 0;
        }

        .user_sign {
            line-height: 20px;
            font-size: 12px;
        }
    }

    .content {
        width: 100%;

        .logout_box {
            margin-top: 18px;
            padding: 0 10px;

            .logout_btn {
                width: 100%;
            }
        }
    }

    .no_login_content {
        .login_btn {
            width: 180px;
        }
    }
}
</style>